CSS positioning

Relative

Positioned relative to its normal flow. Using top, right, bottom, or left will offset it without affecting the layout of surrounding elements.

Absolute

Removed from the normal document flow and positioned relative to its nearest positioned ancestor. It doesn't leave a gap in the page layout.

Fixed

Positioned relative to the viewport (browser window). It stays in the same position even when the page is scrolled, just like the top navigation bar.

The nav bar is position: fixed

By setting the navigation bar to position: fixed, we have removed it from the normal document flow. This means it no longer occupies space in the layout. We added padding to the top of our main container to account for the space it needs. Additionally, it creates a new stacking context, ensuring it remains visible above other elements as they scroll underneath.